<template>
  <div class="lx__search-box flex flex">
    <div class="lx__category-box flex">
      <div class="category-item" @click="categoryChange(null)">全部</div>
      <div
        class="category-item"
        :class="{
          'is-active':
            categoryList.current && categoryList.current.id == category.id,
        }"
        v-for="category in categoryList.list"
        :key="category.id"
        @click="categoryChange(category)"
      >
        {{ category.name }}
      </div>
    </div>
    <div class="lx__tag-box flex">
      <div class="tag-item" @click="tagChange(null)">全部</div>
      <div
        class="tag-item"
        :class="{
          'is-active': tagList.current && tagList.current.id == tag.id,
        }"
        v-for="tag in tagList.list"
        :key="tag.id"
        @click="tagChange(tag)"
      >
        {{ tag.name }}
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useTagList } from "../hooks/useTagList";
import { useCategory } from "../hooks/useCategory";
import { Category } from "@/types/category";
import { Tag } from "@/types/tag";
const emit = defineEmits(["category-change", "tag-change"]);
const { categoryList } = useCategory();
const { tagList } = useTagList();

const categoryChange = (category: Category | null): void => {
  categoryList.current = category;
  emit("category-change", category ? category.id : "");
};
const tagChange = (tag: Tag | null): void => {
  tagList.current = tag;
  emit("tag-change", tag ? tag.id : "");
};
</script>
<style lang="scss" scoped>
.lx__search-box {
  padding: 20px;
  position: sticky;
  top: 0;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  .lx__category-box {
    flex: 1 1 35%;
    flex-wrap: wrap;
    .category-item {
      padding: 0 20px;
      cursor: pointer;
      letter-spacing: 2px;
      &.is-active,
      &:hover {
        color: #1e71ff;
      }
    }
  }
  .lx__tag-box {
    flex: 1 1 65%;
    flex-wrap: wrap;
    .tag-item {
      padding: 0 20px;
      cursor: pointer;
      letter-spacing: 2px;
      background-color: #f6f7f8;
      border: 1px solid #f1f2f3;
      border-radius: 6px;
      transition: background-color 0.3s, color 0.3s;
      font-weight: 400px;
      text-align: center;
      height: 26px;
      line-height: 26px;
      font-size: 14px;
      margin: 5px;
      color: #61666d;
      &.is-active,
      &:hover {
        color: #000;
        background: #ddd;
      }
    }
  }
}
</style>
